<template>
	<div id="recommend">
		<div class="recommen">
			<p>推荐歌单</p>
			<i class="iconfont icon-refresh" @click="change" @touchstart="col" @touchend="coL" :style="{color: cL}">换一批</i>
		</div>
		<div id="geDan">
			<div class="gedan" v-for='(item,index) in recMusic' :key="index"><img :src="item.pic_big" />
			<i class="iconfont icon-iconfonterji">{{Math.floor(Math.random()*30000)}}</i>
			</div>
		</div>
	</div>
</template>

<script>
import jsonp from "jsonp";
export default {
  name: "",
  data() {
    return {
      MyMusic: JSON.parse(sessionStorage.getItem("MyMusic")),
      num: "",
      cL: "#666666"
    };
  },
  created() {
    if (!this.MyMusic) {
      jsonp(
        "http://tingapi.ting.baidu.com/v1/restserver/ting?format=json&calback=&from=webapp_music&method=baidu.ting.song.getRecommandSongList&song_id=87&num=30",
        null,
        (err, res) => {
          if (!err) {
            console.log(res.result.list);
            let gedan = res.result.list;
            this.MyMusic = gedan;
            sessionStorage.setItem("MyMusic", JSON.stringify(gedan));
          } else {
            console.log(err);
          }
        }
      );
    }
  },
  computed: {
    recMusic() {
      if (this.MyMusic) {
        return this.MyMusic.slice(this.num, this.num + 6);
      }
    }
  },
  methods: {
    change() {
      this.num = Math.floor(Math.random() * 24);
      console.log(this.num);
    },
    col() {
      this.cL = "skyblue";
    },
    coL() {
      this.cL = "#666666";
    }
  }
};
</script>

<style lang="scss"  scoped>
@charset "utf-8";

#recommend {
  width: 100%;

  overflow: auto;
  margin-bottom: 1.5rem;
  .recommen {
    width: 100%;
    height: 1 * 1.65rem;
    text-align: center;
    line-height: 1 * 1.65rem;
    position: relative;
    p {
      font-size: 0.3 * 1.65rem;
      font-weight: 800;
    }
    .icon-refresh {
      font-size: 0.28 * 1.65rem;
      color: #21c5bd;
      position: absolute;
      left: 80%;
      top: 0;
    }
  }
  #geDan {
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .gedan {
      width: 32%;
      margin-bottom: 0.2 * 1.65rem;
      position: relative;
      img {
        display: block;
        width: 100%;
      }
      i {
        font-size: 0.3 * 1.65rem;
        position: absolute;
        top: 0.08 * 1.65rem;
        left: 0.12 * 1.65rem;
        color: #21c5bd;
      }
    }
  }
}
</style>